<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片识别系统</title>
    <style>

    button{
        background-color:hsl(229, 90%, 49%);
        color:white;
        width: 250px;
        height: 45px;
        border:0;
        font-size: 16px;
        box-sizing: content-box;				
        border-radius: 5px;
    }
    button:hover{
        background-color: hsl(227, 69%, 24%);
    }

    
    </style>
    </style>
    

</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = Vue.createApp({
        template: `
                <div align = 'center' >
                    <h1 >图片在线识别系统</h1>
                    <input type="file" @change="onFileChange">
                    <br/>
                    <button @click="upload">上传</button>
                    <br/>
                    <img v-if="imageUrl" :src="imageUrl" alt="上传的图片" width="304" height="228">
                    <br/>
                    <div v-if="result">识别结果：{{ result }}</div>
                </div>
            `,
        data() {
            return {
                file: null,
                result: null,
                imageUrl:null
            }
        },
        methods: {
            onFileChange(e) {
                this.file = e.target.files[0]
                this.imageUrl = URL.createObjectURL(this.file)
            },
            upload() {
                let formData = new FormData()
                formData.append('file', this.file)
                axios.post('/web/upload', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                    .then(response => {
                        this.result = response.data
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    });

    app.mount('#app');
</script>
</body>
</html>
